<template>
  <div class="swiper_banner">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
      <!-- slides -->
      <swiper-slide>
        <div class="swiper_banner_item">
          <img src="../../../static/bg-img/b1.jpg" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="swiper_banner_item">
          <img src="../../../static/bg-img/b2.jpg" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="swiper_banner_item">
          <img src="../../../static/bg-img/b3.jpg" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="swiper_banner_item">
          <img src="../../../static/bg-img/b4.jpg" alt="">
        </div>
      </swiper-slide>
      <!-- Optional controls -->
      <!--<div class="swiper-pagination"  slot="pagination"></div>-->
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
      <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'swiper_banner',
  data () {
    return {
      swiperOption: {
        speed: 1200,
        autoplay: {
          delay: 1000
        },
        height: 100,
        loop: true,
        slidesPerView: 3,
        spaceBetween: 40
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // this.swiper.slideTo(3, 1000, false)
  },
  methods: {
    callback (c) {
      console.log(c)
    }
  }
}
</script>

<style scoped lang="less">
  .swiper_banner{
    padding-top: 20px;
    h3{
      padding: 40px 0px;
      font-size: 18px;
      margin: 0 auto;
      text-align: center;
    }
  }
  .swiper_banner_item{
    overflow: hidden;
    img{
      width: 100%;
    }
  }
</style>
